// 游戏页面交互逻辑
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    const gameListContainer = document.getElementById('game-list');
    
    // 加载游戏列表
    loadGameList();

    /**
     * 从API加载游戏列表并渲染到页面
     */
    function loadGameList() {
        // 显示加载状态
        gameListContainer.innerHTML = '<div class="loading">加载游戏列表中...</div>';
        
        fetch('/api/games')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(games => {
                renderGameList(games);
            })
            .catch(error => {
                gameListContainer.innerHTML = `<div class="error">加载游戏列表失败: ${error.message}</div>`;
                console.error('加载游戏列表时出错:', error);
            });
    }

    /**
     * 渲染游戏列表到页面
     * @param {Array} games - 游戏数据数组
     */
    function renderGameList(games) {
        if (games.length === 0) {
            gameListContainer.innerHTML = '<div class="no-games">暂无可用游戏</div>';
            return;
        }
        
        // 创建游戏卡片HTML
        const gameCardsHTML = games.map(game => `
            <div class="game-card" data-game-path="${game.path}">
                <img src="/static/images/${game.image}" alt="${game.name}">
                <h3>${game.name}</h3>
            </div>
        `).join('');
        
        gameListContainer.innerHTML = gameCardsHTML;
        
        // 为每个游戏卡片添加点击事件
        document.querySelectorAll('.game-card').forEach(card => {
            card.addEventListener('click', function() {
                const gamePath = this.getAttribute('data-game-path');
                // 在新窗口打开游戏加载页面
                window.open(`/game/${encodeURIComponent(gamePath)}`, '_blank', 'width=800,height=600');
            });
        });
    }

    /**
     * 加载游戏文件并准备游戏运行环境
     * @param {string} gamePath - 游戏目录路径
     */
    function loadGameFiles(gamePath) {
        // 创建游戏加载容器
        const gameLoader = document.createElement('div');
        gameLoader.className = 'game-loader';
        gameLoader.innerHTML = '<div class="loading">正在加载游戏资源...</div>';
        document.body.appendChild(gameLoader);
        
        fetch(`/api/game/${gamePath}/files`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('游戏资源加载失败');
                }
                return response.json();
            })
            .then(gameFiles => {
                // 隐藏加载状态，显示开始游戏按钮
                gameLoader.innerHTML = `
                    <div class="game-ready">
                        <h2>游戏加载完成!</h2>
                        <button id="start-game-btn" class="btn">开始游戏</button>
                    </div>
                `;
                
                // 开始游戏按钮点击事件
                document.getElementById('start-game-btn').addEventListener('click', function() {
                    startGame(gameLoader, gameFiles);
                });
            })
            .catch(error => {
                gameLoader.innerHTML = `<div class="error">游戏加载失败: ${error.message}</div>`;
                console.error('加载游戏文件时出错:', error);
            });
    }

    /**
     * 启动游戏，将游戏文件内容注入到页面
     * @param {HTMLElement} container - 游戏容器
     * @param {Object} gameFiles - 游戏文件内容对象
     */
    function startGame(container, gameFiles) {
        // 清空容器，准备注入游戏内容
        container.innerHTML = `
            <div class="game-container">
                ${gameFiles.html}
                <style>${gameFiles.css}</style>
                <script>${gameFiles.js}</script>
            </div>
        `;
        
        // 添加关闭游戏按钮
        const closeBtn = document.createElement('button');
        closeBtn.className = 'close-game-btn';
        closeBtn.textContent = '关闭游戏';
        closeBtn.addEventListener('click', function() {
            document.body.removeChild(container);
        });
        container.appendChild(closeBtn);
    }
}); 